<template>
    <!-- 注册页面 -->
    <div>
        <div class="topMessage" :style="topShow">
            <a-icon type="info-circle" />
            此手机号已被注册，如确认是您的手机号，请点击登录页面去登录！
        </div>
        <div class="register">
            <div class='content'>
                <!-- 注册页面 -->
                <div class="userinfo">
                    <h2>账号注册使用手机号</h2>
                    <a-form-model 
						ref="ruleForm"
						:model="form"
						:rules="rules"
					>
                        <!-- 手机 -->
		    		    <a-row type="flex" justify="start" class="phone">
                            <a-col :xs="24" :sm="24" :md="16" :lg="12" :xl="12">
                                <span>*手机</span><br/>
                                <span>若通过手机号注册，浪琴表将通过短信与您联系</span><br/>
                                <a-form-model-item prop="phone">
							    	<a-input type="text"  v-model="form.phone"/>
							    </a-form-model-item>
      	    	    		</a-col>
                        </a-row>
                        <!-- 验证码 -->
                        <a-row type="flex" justify="start" class="code">
                            <a-col :span="24">
                                <span>*手机验证码</span>
      	    	    		</a-col>
                            <a-col :xs="16" :sm="16" :md="10" :lg="6" :xl="6" class="">
                                <input type="text">
      	    	    		</a-col>
                            <a-col :xs="6" :sm="6" :md="10" :lg="6" :xl="6" class="">
      	    	    		  	<button>
                                    <router-link to="">
                                        获取验证码
                                    </router-link>
                                </button>
      	    	    		</a-col>
    	    		    </a-row>
                        <!-- 密码 -->
                        <a-row type="flex" justify="space-between" class="passWordLeft">
                            <a-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11" class="">
                                <span>*密码</span><br/>
                                <a-form-model-item prop="password">
							    	<a-input type="text" v-model="form.password"/>
							    </a-form-model-item>
      	    	    		</a-col>
                            <a-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11" class="">
                                <span>*确认密码</span><br/>
                                <a-form-model-item prop="affirmPassword">
							    	<a-input type="text" v-model="form.affirmPassword"/>
							    </a-form-model-item>
      	    	    		</a-col>
    	    		    </a-row>
                        <!-- 必填项 -->
                        <div class="mandatory">
                            <span>*必填项</span><br/>
                            <a-form-model-item prop="agreement">
                                <a-checkbox :checked="form.agreement" @change="form.agreement = !form.agreement">
                                    <span>我已阅读并同意</span>
                                    <router-link to=''>《隐私政策》</router-link>
                                </a-checkbox>
							</a-form-model-item>
                        </div>
                        <a-row :class="{submit:true, noSubmit:!form.agreement}">
                            <a-col :xs="24" :sm="14" :md="12" :lg="10" :xl="10" class="create">
      	    	    		  	<button @click="submit" :disabled="!form.agreement">
            	                  	<span>提交</span>
            	                  	<span class="iconfont icon--_jiantou"></span>
            	      	        </button>
      	    	    		</a-col>
    	    		    </a-row>
                    </a-form-model>
                    <div class="minLogin hidden-sm-and-up">
                        <h3>已有账号</h3>
                        <router-link to="">
                            <button>
            	                <span >登录</span>
            	              	<span class="iconfont icon--_jiantou"></span>
            	      	    </button>
                        </router-link>
                    </div>
                </div>
                <!-- 已有账户 -->
                <div class="account hidden-xs-only">
                    <div class="text">
                        <h3>欢迎</h3>
                        <p>浪琴表将为您呈现精美时计，非凡品质及服务。</p>
                    </div>
      	    		<h2>已有账户</h2>
            	    <a-form-model 
					    ref="ruleForm2"
					    :model="form2"
					    :rules="rules"
					>
                        <a-form-model-item prop="phone" label="手机号">
							<a-input type="text" placeholder="输入手机号或邮箱" v-model="form2.phone"/>
						</a-form-model-item>
						<a-form-model-item prop="password" label="密码">
							<a-input type="text" placeholder="密码" v-model="form2.password"/>
						</a-form-model-item>
		    			<router-link to="" class="forgetPassword">
		    				<span>
		    					忘记密码
		    				</span>
		    			</router-link>
		    			<router-link to="">
		    				<button @click="login">
            	        	  	<span>登录</span>
            	        	  	<span class="iconfont icon--_jiantou"></span>
            	      		</button>
		    			</router-link>
		    			<router-link to="">
            	      		<button>
            	        	  	<span>微信快捷登录</span>
            	        	  	<span class="iconfont icon--_jiantou"></span>
            	      		</button>
		    			</router-link>
            	    </a-form-model>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapActions} from "vuex"
import {registration, loginRequest} from '../assets/js/request.js'
export default {
    data() {
        return {
            // 注册表单的数据
            form:{
				phone: "",
				password: "",
                affirmPassword: "",
                agreement: false
			},
            // 登录的表单
            form2:{
                phone: "",
				password: "",
            },
			// 表单的验证规则
			rules:{
				phone:[
					{required: true, message: '电话为必填项', trigger: 'blur'},
					{
						pattern: /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[01356789]\d{2}|4(?:0\d|1[0-2]|9\d))|9[189]\d{2}|6[567]\d{2}|4[579]\d{2})\d{6}$/,
						message: "电话格式错误",
						trigger: 'blur'
					}
				],
				password:[
					{required: true, message: '密码为必填项', trigger: 'blur'},
					{
						pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
						message: "密码至少包含：数字和英文字母，长度6-20",
						trigger: 'blur'
					}
				],
				affirmPassword:[
					{required: true, message: '确认密码为必填项', trigger: 'blur'},
					{
						validator: this.ifPassword,
						trigger: 'blur'
					}
				]
			},
            // 顶部注册信息
            topShow: {
                display: "none",
            },
            // 已有账号
            phone2: "",
            password2: "",
        }
    },
    computed: {
        userinfo() {
            let userArr = {
                name: this.form.phone,
                phone: this.form.phone,
                password: this.form.password,
                type: 1,
            }
            return userArr
        },
    },
    methods: {
        ...mapActions('cart', ['getCartArr']),
        // 判断两个密码是否一致
        ifPassword(rule, value, callback) {
            if(value != this.form.password) {
                callback(new Error('输入密码不一致'));
            } else {
                callback()
            }
        },
        // 注册提交
        submit(e) {
            e.preventDefault();
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    registration(this.userinfo)
                    .then( res => {
                        // 注册成功后登录并跳转到我的账号
                        loginRequest({
                            phone: res.phone,
                            password: res.password
                        })
                        .then( (date) => {
                            // localStorage.setItem("user", JSON.stringify(date));
                            // localStorage.setItem("token", date.token);
                            this.$Cookie.set('user', JSON.stringify(date), { expires: 1 });
						    this.$Cookie.set("token", date.token, { expires: 1 });
                            // 请求购物车
						    this.getCartArr()
                            this.topShow.display = 'none';
                            this.$router.push('/myaccount');
                        })
                    })
                    .catch( () => {
                        this.topShow.display = 'block';
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 登录
        login(e) {
            e.preventDefault();
            this.$refs.ruleForm2.validate(valid => {
                if (valid) {
                    loginRequest({
                        phone: this.form2.phone,
                        password: this.form2.password
                    })
                    .then((date) => {
                        // localStorage.setItem("user", JSON.stringify(date));
                        // localStorage.setItem("token", date.token);
                        this.$Cookie.set('user', JSON.stringify(data), { expires: 1 });
						this.$Cookie.set("token", data.token, { expires: 1 });
                        // 请求购物车
						this.getCartArr()
                        this.topShow.display = 'none';
                        this.$router.push('/myaccount');
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    watch: {
        phone(newValue) {
            //  console.log(this.userinfo)
        },
    }
}
</script>

<style lang="scss" scoped>
    // 注册返回信息
    .topMessage {
        display: none;
        text-align: left;
        width: 100%;
        height: 56px;
        background: #7E97AB;
        color: white;
        padding: 20px 20px 20px 50px;
    }
    // 注册内容
    .register {
        width: 100%;
        background-color: #f0f1f3;
        padding: 50px 50px 0;
        @media (max-width: 1200px) {
            padding: 50px 0px 0;
        }
        .content {
            width: 95%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            // 注册
            .userinfo {
                flex-grow: 1;
                text-align: left;
                padding: 3px 25px 13px 77px;
                @media (max-width: 1200px) {
                    padding: 3px 25px 0px 0px;
                }
                input {
                    border-style: none;
                    border: 1px solid #c7c7c7;
                }
                h2 {
                    font-size: 24px;
                    font-weight: 400;
                    color:#003570;
                }
                // 注册表单
                form {
                    padding: 30px 10px 70px;
                    font-size: 12px;
                    @media (max-width: 768px) {
                        padding-bottom: 20px;
                        border-bottom: 1px solid #c7c7c7;
                    }
                    // 手机
                    .phone {
                        font-size: 12px;
                        span:last-of-type {
                            display: inline-block;
                            color: #677988;
                            margin-bottom: 7px;
                        }
                        input {
                            width: 100%;
                            height: 50px;
                            padding: 8px 20px;
                            margin-bottom: 5px;
                        }
                        .ant-input {
                            border-radius: 0;
                        }
                    }
                    // 手机验证码
                    .code {
                        margin-bottom: 20px;
                        span {
                            display: inline-block;
                            margin: 0 0 11px;
                        }
                        input {
                            width: 100%;
                            height: 50px;
                            padding: 8px 20px;
                        }
                        .ant-input {
                            border-radius: 0;
                        }
                        button {
                            font-size: 14px;
                            width: 100%;
                            height: 50px;
                            padding: 5px 10px;
                            margin: 0 0 0 20px;
                            background: #003570;
                            &:hover {
                                background: white;
                                border: 1px solid #003570;
                                a {
                                    color: #003570;
                                }
                            }
                            a {
                                color: white;
                            }
                        }
                    }
                    // 密码
                    .passWordLeft {
                        span {
                            display: inline-block;
                            margin: 0 0 10px;
                        }
                        input {
                            width: 100%;
                            height: 50px;
                            padding: 5px 10px;
                            margin: 0 0 5px;
                        }
                        .ant-input {
                            border-radius: 0;
                        }
                    }
                    // 必填项
                    .mandatory {
                        &>span:first-child {
                            display: inline-block;
                            padding: 29px 0 0;
                        }
                        label {
                            span {
                                color: #677988;
                            }
                            a {
                                margin: 0 0 0 5px;
                                color: #003570;
                                text-decoration-line: underline;
                            }
                        }
                    }
                    // 提交按钮
                    .submit {
                        button {
                            width: 100%;
                            height: 70px;
                            font-size: 14px;
                            background: #003570;
                            padding: 15px 20px 15px 30px;
                            color: white;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            &:hover {
                                background: white;
                                border: 1px solid #003570;
                                color: #003570;
                            }
                            .icon--_jiantou {
                                font-size: 24px;
                            }
                        }
                    }
                    // 提交按钮禁用的样式
                    .noSubmit {
                        button {
                            background: #7E97AB;
                            &:hover {
                                background: #7E97AB;
                                border: 0px;
                                color: white;
                            }
                        }
                    }
                }
                // 移动端已有账号登录
                .minLogin {
                    padding: 25px 10px;
                    h3 {
                        font-weight: 600;
                        margin: 0 0 10px;
                    }
                    a {
                        color: white;
                        button {
                            width: 100%;
                            height: 70px;
                            background: #003570;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 15px 20px 15px 30px;
                            &:hover {
                                background: white;
                                border: 1px solid #003570;
                                color: #003570;
                            }
                            .icon--_jiantou {
                                font-size: 24px;
                            }
                        }
                    }
                }
            }
            // 已有账号
            .account {
                width: 360px;
                flex-grow: 0;
                text-align: left;
				padding: 25px 40px 90px 50px;
				border-left: 1px solid rgb(199, 199, 199);
				margin-top: 30px;
                .text {
                    border-bottom: 1px solid rgb(199, 199, 199);
                    margin-bottom: 30px;
                    p {
                        margin-bottom: 20px;
                    }
                }
				h2 {
					color: hsl(212, 100%, 22%);
					font-size: 24px;
                    font-weight: 600;
					margin-bottom: 20px;
				}
				// 登录用户信息
				form {
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
                    margin-right: 46px;
					input {
						height: 34px;
						padding: 0 10px;
                        margin: 0 0 5px;
						border-style: none;
						border: 1px solid rgb(199, 199, 199);
					}
                    .ant-input {
                        border-radius: 0px;
                    }
					// 忘记密码
					.forgetPassword {
						color: #003570;
						margin-bottom: 10px;
						text-align: right;
						span {
							display: inline-block;
							border-bottom: 1px solid #003570;
						}
					}
					a {
						// 登录按钮
						button {
						width: 100%;
						text-align: left;
						height: 47px;
						color: white;
						background: #003570;
						padding: 0 25px;
						margin: 8px 0;
						display: flex;
							justify-content: space-between;
							align-items: center;
							span:last-child {
								font-size: 24px;
							}
							&:hover {
								color: #003570;
								background-color: white;
								border: 1px solid #003570;
							}
						}
					}
				}
            }
        }
    }
</style>